<template>
    <div class="page dealEmergencyApply-page" data-page="history">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()>
                <i class="iconfont icon-zuo"></i>
            </a>

        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">考试记录</div>

        </div>
        <div class="page-content" style="padding-bottom: 120px;" id="pageContent_{{getNewId}}">
            <ul class="exam-items" id="historyItems_{{getNewId}}">
                <h3>未结束考试</h3>
            </ul>
            <ul class="exam-items" id="historyItems2_{{getNewId}}">
                <h3>已结束考试</h3>
            </ul>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
                getNewId: (new Date()).getTime(),
            }
        },
        mounted() {
            let self = this
            let params = {
                queryType: 0,
                pageSize: 0,
                pageIndex: 0,
                examAccount: this.$route.params.id || userInfor.accountName,
                detailStatus: 2
            }

            Dao.getExamListForApp(params, function (res) {
                let html = ''
                let html2 = ''
                let arr = res.filter(item => {
                    return item.examStatus == 2//已结束
                })
                let arr2 = res.filter(item => {
                    return item.examStatus != 2//未结束
                })
              
                if (arr.length > 0) {
                    for (let i = 0; i < arr.length; i++) {

                        html += `
                            <li class="item"  item-id=${arr[i].id}>
                                <div class="item-top">
                                <div class="item-l ${arr[i].score >= arr[i].passLine ? 'pass' : 'nopass'}">
                                    <p><span>${arr[i].score}分</span></p>
                                    <p>${arr[i].score >= arr[i].passLine ? '及格' : '不及格'}</p>
                                </div>
                                <div class="item-r">
                                    <p>${arr[i].name}</p>
                                    <p>排名 ${arr[i].ranking} <span>答卷时间 ${arr[i].detailBeginTime}</span></p>
                                </div>
                            </div>
                        </li>
                            `
                    }
                    jQuery(`#historyItems2_${self.getNewId}`).append(html)
                } else {
                    jQuery(`#historyItems2_${self.getNewId}`).hide()
                }
                if (arr2.length > 0) {
                    for (let i = 0; i < arr2.length; i++) {
                        html2 += `
                    <li class="item"  item-id=${arr2[i].id}>
                    <div class="item-top">
                    <div class="item-l ${arr2[i].score >= arr2[i].passLine ? 'pass' : 'nopass'}">
                         <p><span>${arr2[i].score}分</span></p>
                        <p>${arr2[i].score >= arr2[i].passLine ? '及格' : '不及格'}</p>
                    </div>
                    <div class="item-r">
                        <p>${arr2[i].name}</p>
                        <p>排名 ${arr2[i].ranking} <span>答卷时间 ${arr2[i].detailBeginTime}</span></p>
                    </div>
                    </div>
                    </li>
                    `
                    }
                    jQuery(`#historyItems_${self.getNewId}`).append(html2)
                } else {
                    jQuery(`#historyItems_${self.getNewId}`).hide()
                }
                if (arr.length == 0 && arr2.length == 0) {
                    jQuery(`#pageContent_${self.getNewId}`).append(`<img src="${staticPath}img/emptyImg/defaultnone.png" style="width:100%">`)
                }
            })
            jQuery(`#historyItems_${self.getNewId}`).on('click', '.item', function (e) {
                app.methods.showToastBottom("考试仍在进行中，请在整体结束后查看答案");
            })
            jQuery(`#historyItems2_${self.getNewId}`).on('click', '.item', function (e) {
                var itemId = jQuery(this).attr('item-id')
                app.router.navigate(`/answer/${itemId}`);
            })

        },
        methods: {
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
            },
        }
    }
</script>
<style scoped>
    .exam-items {
        padding: 0 20px 20px;
    }

    .item {
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        padding: 20px 0;
        margin-bottom: 20px;
    }

    .item-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .item-l {
        margin: 0 10px;
        width: 64px;
        text-align: center;
        padding: 10px 0;
    }

    .item-l p {
        font-size: 12px;
        ;
    }

    .item-l p span {

        font-size: 21px;
        font-weight: bold;
    }

    .item-r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .item-r p:nth-child(1) {
        color: #000000;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .item-r p:nth-child(2) {
        color: #2471CA;
        font-size: 12px;
    }

    .item-r p:nth-child(2) span {
        color: rgba(0, 0, 0, .5);
    }

    .item-bottom {
        font-size: 12px;
        color: red;
        margin-top: 20px;
    }

    .item-remove {
        display: none;
    }

    .pass {
        background: rgba(241, 241, 241, 1);
        color: #69BA71;
    }

    .nopass {
        background: rgba(241, 241, 241, 1);
        color: #E07762;
    }
</style>